<template>
  <view class="container">
    <!-- 提交成功后显示的内容 -->
    <view v-if="submitted" class="success-message">
      <text class="success-text">评价提交成功，感谢您的反馈！</text>
    </view>

    <!-- 提交前显示的表单内容 -->
    <view v-else>
      <!-- 标题区域 -->
      <view class="title-section">
        <text class="main-title">服务评价问卷</text>
        <text class="sub-title">请您对我们的服务进行评价，您的反馈对我们很重要</text>
      </view>

      <!-- 评分表单区域 -->
      <form class="form-container" @submit="handleSubmit">
        <!-- 评分问题列表 -->
        <view class="question-list">
          <!-- 问题1：客服响应效率 -->
          <view class="question-item">
            <text class="question-text">1. 客服响应效率 <text class="required">*</text></text>
            <view class="stars-container">
              <view
                  class="star"
                  v-for="(star, index) in 5"
                  :key="index"
                  @click="handleStarClick(index + 1, 'rating1')"
              >
                <!-- 星星容器：承载全星图标，通过背景渐变实现半亮效果 -->
                <view class="star-wrapper">
                  <!-- 底层灰色星星（暗部，始终显示） -->
                  <uni-icons
                      type="star-filled"
                      size="32"
                      color="#CCCCCC"
                      class="star-gray"
                  ></uni-icons>
                  <!-- 上层星星：通过渐变裁剪实现亮部（全亮/半亮） -->
                  <uni-icons
                      type="star-filled"
                      size="32"
                      color="#FFCC00"
                      :class="getStarBrightClass(rating1, index)"
                  ></uni-icons>
                </view>
              </view>
            </view>
            <text class="rating-text">{{ getRatingText(rating1) }}</text>
          </view>

          <!-- 问题2：上门服务态度 -->
          <view class="question-item">
            <text class="question-text">2. 上门服务态度 <text class="required">*</text></text>
            <view class="stars-container">
              <view
                  class="star"
                  v-for="(star, index) in 5"
                  :key="index"
                  @click="handleStarClick(index + 1, 'rating2')"
              >
                <view class="star-wrapper">
                  <uni-icons
                      type="star-filled"
                      size="32"
                      color="#CCCCCC"
                      class="star-gray"
                  ></uni-icons>
                  <uni-icons
                      type="star-filled"
                      size="32"
                      color="#FFCC00"
                      :class="getStarBrightClass(rating2, index)"
                  ></uni-icons>
                </view>
              </view>
            </view>
            <text class="rating-text">{{ getRatingText(rating2) }}</text>
          </view>

          <!-- 问题3：员工专业能力 -->
          <view class="question-item">
            <text class="question-text">3. 员工专业能力 <text class="required">*</text></text>
            <view class="stars-container">
              <view
                  class="star"
                  v-for="(star, index) in 5"
                  :key="index"
                  @click="handleStarClick(index + 1, 'rating3')"
              >
                <view class="star-wrapper">
                  <uni-icons
                      type="star-filled"
                      size="32"
                      color="#CCCCCC"
                      class="star-gray"
                  ></uni-icons>
                  <uni-icons
                      type="star-filled"
                      size="32"
                      color="#FFCC00"
                      :class="getStarBrightClass(rating3, index)"
                  ></uni-icons>
                </view>
              </view>
            </view>
            <text class="rating-text">{{ getRatingText(rating3) }}</text>
          </view>

          <!-- 问题4：员工廉洁行为 -->
          <view class="question-item">
            <text class="question-text">4. 员工廉洁行为（无索取/收受红包等行为） <text class="required">*</text></text>
            <view class="stars-container">
              <view
                  class="star"
                  v-for="(star, index) in 5"
                  :key="index"
                  @click="handleStarClick(index + 1, 'rating4')"
              >
                <view class="star-wrapper">
                  <uni-icons
                      type="star-filled"
                      size="32"
                      color="#CCCCCC"
                      class="star-gray"
                  ></uni-icons>
                  <uni-icons
                      type="star-filled"
                      size="32"
                      color="#FFCC00"
                      :class="getStarBrightClass(rating4, index)"
                  ></uni-icons>
                </view>
              </view>
            </view>
            <text class="rating-text">{{ getRatingText(rating4) }}</text>
          </view>

          <!-- 问题5：联系方式 -->
          <view class="question-item contact-item">
            <text class="question-text">5. 您的联系方式（选填）</text>
            <input
                type="number"
                placeholder="请输入手机号（选填）"
                v-model="phone"
                @input="validatePhone"
                class="contact-input"
            >
            </input>
            <text class="phone-hint" v-if="phoneError">{{ phoneError }}</text>
          </view>
        </view>

        <!-- 提交按钮 -->
        <button
            form-type="submit"
            class="submit-btn"
            :disabled="!canSubmit"
        >
          提交评价
        </button>
      </form>
    </view>
  </view>
</template>

<script>
export default {
  name: 'RatingQuestionnaire',
  data() {
    return {
      submitted: false,
      rating1: 0,
      rating2: 0,
      rating3: 0,
      rating4: 0,
      phone: '',
      phoneError: '',
    };
  },
  computed: {
    canSubmit() {
      return this.rating1 > 0 && this.rating2 > 0 && this.rating3 > 0 && this.rating4 > 0;
    }
  },
  methods: {
    // 获取星级文字描述
    getRatingText(rating) {
      if (rating <= 0) return '';
      const texts = [
        '很差',    // 0.5-1.0
        '较差',    // 1.5-2.0
        '一般',    // 2.5-3.0
        '良好',    // 3.5-4.0
        '非常好'   // 4.5-5.0
      ];
      const index = Math.min(Math.floor((rating - 0.5) / 1), 4);
      return `${rating}星 - ${texts[index]}`;
    },

    // 点击星星切换逻辑（空→半→整→空）
    handleStarClick(starIndex, ratingKey) {
      const currentRating = this[ratingKey];
      if (currentRating === starIndex) {
        this[ratingKey] = 0; // 整星 → 空星
      } else if (currentRating === starIndex - 0.5) {
        this[ratingKey] = starIndex; // 半星 → 整星
      } else {
        this[ratingKey] = starIndex - 0.5; // 空星/其他 → 半星
      }
    },

    // 获取上层星星的样式类（全亮/半亮/隐藏）
    getStarBrightClass(rating, index) {
      const starPos = index + 1;
      const integerPart = Math.floor(rating);
      const isHalfRating = rating % 1 === 0.5;

      if (starPos <= integerPart) {
        return 'star-full-bright'; // 全亮：显示完整黄色星星
      } else if (isHalfRating && starPos === integerPart + 1) {
        return 'star-half-bright'; // 半亮：只显示左半部分黄色
      } else {
        return 'star-hidden'; // 隐藏：不显示黄色星星（只显示底层灰色）
      }
    },

    // 验证手机号
    validatePhone() {
      if (!this.phone) {
        this.phoneError = '';
        return true;
      }
      const reg = /^1[3-9]\d{9}$/;
      if (reg.test(this.phone)) {
        this.phoneError = '';
        return true;
      } else {
        this.phoneError = '请输入正确的手机号';
        return false;
      }
    },

    // 提交表单
    handleSubmit() {
      if (this.phone && !this.validatePhone()) {
        return;
      }

      const formData = {
        efficiency: this.rating1,
        attitude: this.rating2,
        ability: this.rating3,
        behavior: this.rating4,
        contact: this.phone || null
      };

      console.log('提交的评价数据:', formData);
      this.tui.request('/api/service-evaluation', 'post', formData, false, false, true).then((res) => {
        if (res) {
          this.submitted = true;
        }
      })
    }
  }
};
</script>

<style scoped>
/* 原有样式保持不变，重点新增星星渐变裁剪样式 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: white;
  padding: 20rpx;
}

.title-section {
  text-align: center;
  padding: 40rpx 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.main-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
}

.sub-title {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.form-container {
  flex: 1;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.question-list {
  display: flex;
  flex-direction: column;
  gap: 40rpx;
}

.question-item {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  padding-bottom: 30rpx;
  border-bottom: 1px solid #eee;
}

.question-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.question-text {
  font-size: 30rpx;
  color: #333;
  line-height: 1.5;
}

.required {
  color: #FF3B30;
}

.stars-container {
  display: flex;
  gap: 28rpx;
  padding: 10rpx 0;
  align-items: center;
}

.star {
  transition: all 0.2s ease;
  cursor: pointer;
  transform: scale(1);
}

.star:active {
  transform: scale(0.95);
}

/* 星星容器：相对定位，让上下两层星星完全重叠 */
.star-wrapper {
  position: relative;
  width: 32px;
  height: 32px;
}

/* 底层灰色星星：始终显示，作为暗部 */
.star-gray {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* 上层黄色星星：全亮状态（显示完整黄色） */
.star-full-bright {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  clip-path: inset(0 0 0 0); /* 显示完整星星 */
}

/* 上层黄色星星：半亮状态（只显示左半部分） */
.star-half-bright {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  /* 关键：裁剪右半部分，只显示左半 */
  clip-path: inset(0 50% 0 0);
  /* 兼容webkit内核（如微信小程序） */
  -webkit-clip-path: inset(0 50% 0 0);
}

/* 上层黄色星星：隐藏状态（不显示） */
.star-hidden {
  display: none;
}

.rating-text {
  font-size: 26rpx;
  color: #FF6600;
  margin-top: 8rpx;
}

.contact-item {
  margin-top: 10rpx;
}

.contact-input {
  width: 90%;
  height: 80rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  margin-top: 10rpx;
}

.phone-hint {
  font-size: 24rpx;
  color: #FF3B30;
  margin-top: 8rpx;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #007AFF;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  margin-top: 50rpx;
  letter-spacing: 2rpx;
}

.submit-btn:disabled {
  background-color: #ccc;
  opacity: 0.7;
}

.success-message {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 16rpx;
  margin: 20rpx;
  padding: 40rpx;
  text-align: center;
}

.success-text {
  font-size: 32rpx;
  color: #333;
  line-height: 1.8;
}
</style>